<template>
  <div class=" publicBox" id="charecterNewbuild">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom" :rules="rules" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
               <p>角色管理/新建</p>
     </div>
</el-row>

<el-row>
         <el-form-item label="角色" prop="role">
                 <!-- <el-input class="pubSerIpt" v-model="ruleForm.role" v-if="!disabledFlag" placeholder="请输入角色"></el-input> -->
                 <p>{{ruleForm.role}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="角色描述" prop="describe">
                 <!-- <el-input class="pubSerIpt" v-model="ruleForm.describe" v-if="!disabledFlag" placeholder="请输入角色"></el-input> -->
                 <p>{{ruleForm.describe}}</p>
       </el-form-item>
</el-row>

<el-row>
     <div class="tips">
               <span>权限列表</span>
               <span style="color:red">（选中表示该角色拥有该权限，未选中表示不拥有该权限）</span>
     </div>
</el-row>

<el-row class="tree_box">
    <!-- <el-form > -->
        <el-tree
         :data="data_a"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
        <el-tree
         :data="data_b"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
        <el-tree
         :data="data_c"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
        <el-tree
         :data="data_d"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
        <el-tree
         :data="data_e"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
        <el-tree
         :data="data_f"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
        <el-tree
         :data="data_g"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
        <el-tree
         :data="data_h"
         show-checkbox
         node-key="id"
         :props="defaultProps">
        </el-tree>
    <!-- </el-form> -->

</el-row>

<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnGree" type="primary" @click="submitForm">提交</el-button>
                         <el-button class="pubBtnGray" @click="$canCleFn"  type="primary">取消</el-button>
       </el-form-item>
</el-row>

</el-form>
    
  </div>
</template>

<script>

import * as Api from '@api/system.js'
export default {
  components: {


  },
  data() {
    return {
     disabledFlag:false,
     RootOptions: [],
     ruleForm:{
      role:"超级管理员",
      describe:"平台所有权限",
      jurisdiction:''
     },
     data_a: [{
          id: 1,
          label: '设备管理',
          children: [{
            id: 1-1,
            label: '供应商管理'
          },
          {
            id: 1-2,
            label: '设备品类管理'
          },
          {
            id: 1-3,
            label: '通信模块管理'
          },
          {
            id: 1-4,
            label: '终端设备管理'
          },
          {
            id: 1-5,
            label: '库存管理'
          }]
        }],
     data_b: [{
          id: 2,
          label: '门店管理',
          children: [{
            id: 2-1,
            label: '门店管理'
          },
          {
            id: 2-2,
            label: '区域管理'
          }]
        }],
     data_c: [{
          id: 3,
          label: '运营管理',
          children: [{
            id: 3-1,
            label: '定价管理'
          },
          {
            id: 3-2,
            label: '服务项目管理'
          },
          {
            id: 3-3,
            label: '优惠卷管理'
          }]
        }],
     data_d: [{
          id: 4,
          label: 'APP管理',
          children: [{
            id: 4-1,
            label: 'banner管理'
          }]
        }],
     data_e: [{
          id: 5,
          label: '订单管理',
          children: [{
            id: 5-1,
            label: '订单管理'
          }]
        }],
     data_f: [{
          id: 6,
          label: '财务管理',
          children: [{
            id: 6-1,
            label: '支付订单管理'
          },
          {
            id: 6-2,
            label: '退款管理'
          }]
        }],
     data_g: [{
          id: 7,
          label: '用户管理',
          children: [{
            id: 7-1,
            label: '用户管理'
          }]
        }],
     data_h: [{
          id:8,
          label: '系统管理',
          children: [{
            id: 8-1,
            label: '账号管理'
          },{
            id: 8-2,
            label: '角色管理'
          },{
            id: 8-3,
            label: '系统管理'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },

      rules: {
          mphone: [
            {required: true, message: '请输入手机号码', trigger: 'blur' },
            { type: 'number', message: '手机号码必须为数字'}
          ],
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          acnt: [
            {required: true, message: '请输入ID', trigger: 'blur' }
          ],
          pid: [
            {required: true, message: '请选择角色权限', trigger: 'blur' }
          ],
        }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
       submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                    this.addAccount()
            } else {
              return false;
            }
        });
       }

  },
  created() {
        //    this.getRoot()
        //    if(Object.keys(this.$route.query).length>0){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
        //           this.disabledFlag=true
        //    }
 
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
.tree_box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #BBBBBB ;
    box-sizing: border-box;
    height: 221px;
}
.tips{
    margin: 15px 0 15px 0;
    color: #000000;
}
.el-tree{
    margin-top: 10px;
}
</style>